<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.wxtf.platform.plugins.user.*"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	UserBean user = (UserBean) request.getSession().getAttribute("userBean");

	String _db = user.getDbType();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<link type="text/css" rel="stylesheet" href="ligerUI/skins/Aqua/css/ligerui-all.css" />
		<link type="text/css" rel="stylesheet" href="ligerUI/skins/<%=user.getUserCss()%>/css/ligerui-all.css" />
		<link type="text/css" rel="stylesheet" href="ligerUI/skins/ligerui-icons.css" />
		<link type="text/css" rel="stylesheet" href="resource/css/style.css" />

		<script type="text/javascript" src="js/jquery/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/amcharts/amcharts.js"></script>


<script type="text/javascript">
var _db = '<%=_db%>';

_jsonObj.classname = "com.wxtf.platform.main.employee.EmployeeAction";
_jsonObj.methodname = "queryPage";
_jsonObj.logicdata = "[{\"types\":\"init\"}]";



var chartData = [
	{key: "Lithuania",value: 260}, {key: "Ireland",value: 201}, 
	{key: "Germany",value: 65}, {key: "Australia",value: 39},
	{key: "UK",value: 19}, {key: "Latvia",value: 10}
];

var chartData2 = [
	{key: "USA",visits: 4025,color: "#FF0F00"}, {key: "China",visits: 1882,color: "#FF6600"}, 
	{key: "Japan",visits: 1809,color: "#FF9E01"}, {key: "Germany",visits: 1322,color: "#FCD202"}, 
	{key: "UK",visits: 1122,color: "#F8FF01"}, {key: "France",visits: 1114,color: "#B0DE09"}, 
	{key: "India",visits: 984,color: "#04D215"}, {key: "Spain",visits: 711,color: "#0D8ECF"}, 
	{key: "Netherlands",visits: 665,color: "#0D52D1"}, {key: "Russia",visits: 580,color: "#2A0CD0"}, 
	{key: "South Korea",visits: 443,color: "#8A0CCF"}, {key: "Canada",visits: 441,color: "#CD0D74"}
];

var chart3;
var chartData3 = [];
var chartCursor;


AmCharts.ready(function () {
	generateChartData();
	
	creatChart(chartData);
	creatChart2(chartData2);
	creatChart3(chartData3);
	
	
});



function creatChart(data){
	// PIE CHART
	var chart = new AmCharts.AmPieChart();
	chart.dataProvider = data;
	chart.titleField = "key";
	chart.valueField = "value";
	chart.outlineColor = "#FFFFFF";
	chart.outlineAlpha = 0.8;
	chart.outlineThickness = 2;
	// this makes the chart 3D
	chart.depth3D = 15;
	chart.angle = 30;
	
	// WRITE
	$('#chartdiv1').html('');
	chart.write("chartdiv1");
	return chart;
}

function creatChart2(data){
	var chart = new AmCharts.AmSerialChart();
	chart.dataProvider = data;
	chart.categoryField = "key";
	// the following two lines makes chart 3D
	chart.depth3D = 20;
	chart.angle = 30;
	
	// AXES
	// category
	var categoryAxis = chart.categoryAxis;
	categoryAxis.labelRotation = 90;
	categoryAxis.dashLength = 5;
	categoryAxis.gridPosition = "start";
	
	// value
	var valueAxis = new AmCharts.ValueAxis();
	valueAxis.title = "Visitors";
	valueAxis.dashLength = 5;
	chart.addValueAxis(valueAxis);
	
	// GRAPH            
	var graph = new AmCharts.AmGraph();
	graph.valueField = "visits";
	graph.colorField = "color";
	graph.balloonText = "[[category]]: [[value]]";
	graph.type = "column";
	graph.lineAlpha = 0;
	graph.fillAlphas = 1;
	chart.addGraph(graph);
	
	// WRITE
	chart.write("chartdiv2");
}

function creatChart3(){
	chart3 = new AmCharts.AmSerialChart();
	chart3.pathToImages = "js/amcharts/images/";
	chart3.zoomOutButton = {
	    backgroundColor: '#000000',
	    backgroundAlpha: 0.15
	};
	chart3.dataProvider = chartData3;
	chart3.categoryField = "date";
	chart3.balloon.bulletSize = 5;
	
	chart3.addListener("dataUpdated", zoomChart);
	
	// AXES
	// category
	var categoryAxis = chart3.categoryAxis;
	categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
	categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
	categoryAxis.dashLength = 1;
	categoryAxis.gridAlpha = 0.15;
	categoryAxis.position = "top";
	categoryAxis.axisColor = "#DADADA";
	
	// value                
	var valueAxis = new AmCharts.ValueAxis();
	valueAxis.axisAlpha = 0;
	valueAxis.dashLength = 1;
	chart3.addValueAxis(valueAxis);
	
	// GRAPH
	var graph = new AmCharts.AmGraph();
	graph.title = "red line";
	graph.valueField = "visits";
	graph.bullet = "round";
	graph.bulletBorderColor = "#FFFFFF";
	graph.bulletBorderThickness = 2; 
	graph.lineThickness = 2;
	graph.lineColor = "#5fb503";
	graph.negativeLineColor = "#efcc26";
	graph.hideBulletsCount = 50; // this makes the chart3 to hide bullets when there are more than 50 series in selection
	chart3.addGraph(graph);
	
	// CURSOR
	chartCursor = new AmCharts.ChartCursor();
	chartCursor.cursorPosition = "mouse";
	chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
	chart3.addChartCursor(chartCursor);
	
	// SCROLLBAR
	var chartScrollbar = new AmCharts.ChartScrollbar();
	chart3.addChartScrollbar(chartScrollbar);
	
	// WRITE
	chart3.write("chartdiv3");
}
function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);

    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * 40) - 20;

        chartData3.push({
            date: newDate,
            visits: visits
        });
    }
}

function zoomChart() {
    chart3.zoomToIndexes(chartData3.length - 40, chartData3.length - 1);
}

function setPanSelect() {
    if (document.getElementById("rb1").checked) {
        chartCursor.pan = false;
        chartCursor.zoomable = true;
    } else {
        chartCursor.pan = true;
    }
    chart3.validateNow();
}





function serch1(){
	
	
}



</script>
</head>
	<body>
		<table class="serTable">
			<tr>
				<td><input class="btn2" value="搜索" type="button" onclick="serch1();" /></td>
			</tr>
		</table>
		<table>
			<tr>
				<td>
					<div id="chartdiv1" style="width: 500px; height: 300px;"></div>
				</td>
				<td>
					<div id="chartdiv3" style="width: 500px; height: 300px;"></div>
					<div style="margin-left:35px;">
			            <input type="radio" name="group" id="rb1" onclick="setPanSelect()">Select
			            <input type="radio" checked="true" name="group" id="rb2" onclick="setPanSelect()">Pan
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div id="chartdiv2" style="width: 500px; height: 300px;"></div>
				</td>
			</tr>
		</table>

	</body>
</html>










